<template>
	<div>
		<b-modal @ok="modalOk" @cancel="modalCancel" :title="modal.title" :visible="modal.visible">{{modal.content}}</b-modal>
		<my-table ref="tableObj" moreCondition :title="title" :fields="fields" :items="items" :index="indexable" :queryBar="showQueryBar"
		 :pagable="page.pagable" :perPage="page.perPage" :totalRows="page.totalRows" :selectable="selectable" :selectMode="selectMode"
		 :showSelectBtn="showSelectBtn" :oprable="oprable" :oprs="oprs" :customCells="customCells" :actionsColClass="actionsColClass"
		 @item-new="itemNew" @item-update="itemUpdate" @do-query="getItems" @do-reset-query="resetQuery" >

			<template v-slot:primary-query>
				<b-form-group label="状态" label-cols-sm="3" label-align-sm="right" label-size="sm" label-for="article-stats" class="mb-0 m-1">
					<b-input-group size="sm">
						<b-select v-model="query.state" id="article-stats">
							<option value="-1">全部</option>
							<option value="0">未发布</option>
							<option value="1">已发布</option>
							<option value="2">回收站</option>
						</b-select>
					</b-input-group>
				</b-form-group>
			</template>
			<template v-slot:second-query>
				<b-form-group label="标题" label-cols-sm="3" label-align-sm="right" label-size="sm" label-for="article-title" class="mb-0 m-1">
					<b-input-group size="sm">
						<b-input v-model.trim="query.title" id="article-title" placeholder="请输入标题"></b-input>
					</b-input-group>
				</b-form-group>
			</template>
			<template v-slot:other-query>
				<b-container fluid>
					<b-row>
						<b-col cols="6">
							<b-form-group label="修改日期" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0 m-1">
								<b-input-group size="sm">
									<b-select v-model="query.lastUpdateMonth">
										<option value="">全部日期</option>
										<option v-for="m in updateMonths" :key="m" :value="m">{{m}}</option>
									</b-select>
								</b-input-group>
							</b-form-group>
						</b-col>
						<b-col cols="6">
							<b-form-group label="分类目录" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0 m-1">
								<b-input-group size="sm">
									<b-select v-model="query.catalogId">
										<option value="-1">所有分类目录</option>
										<option v-for="cl in allCatalogs" :key="cl.id" :value="cl.id">
											{{cl.name}}
										</option>
									</b-select>
								</b-input-group>
							</b-form-group>
						</b-col>
					</b-row>
				</b-container>
			</template>

			<template v-slot:more-actions="{row}">
				<b-button :disabled="row.item.$trashDisable" @click="itemTrash(row.item)" v-b-tooltip.hover title="移动到回收站" variant="info" size="sm" 
				 class="mr-1">
					<b-icon icon="trash"></b-icon>
				</b-button>
				<b-button :disabled="row.item.$outTrashDisable" @click="itemOutTrash(row.item)" v-b-tooltip.hover title="从回收站还原" variant="info" size="sm"
				 class="mr-1">
					<b-icon icon="arrow-counterclockwise"></b-icon>
				</b-button>
				<b-button :disabled="row.item.$delDisable" @click="itemDelete(row.item)" v-b-tooltip.hover title="永久删除" variant="info" size="sm"
				 class="mr-1">
					<b-icon icon="x"></b-icon>
				</b-button>
				<b-button :disabled="row.item.$publishedDisable" size="sm" class="mr-1" variant="info" title="发布" @click="publish(row.item)" v-b-tooltip.hover>
					<b-icon icon="arrow-bar-up"></b-icon>
				</b-button>
				<b-button :disabled="row.item.$unpublishDisable" size="sm" class="mr-1" variant="info" title="下线" @click="unpublish(row.item)" v-b-tooltip.hover>
					<b-icon icon="arrow-bar-down"></b-icon>
				</b-button>
				<b-link variant="info" title="预览" v-b-tooltip.hover class="mr-1 btn btn-sm btn-info" :href="row.item.url" target="_blank">
					<b-icon icon="box-arrow-up-right"></b-icon>
				</b-link>
			</template>

			<template v-slot:custom-cells-cell(createTime)="{data}">
				<span>{{ formatTime(data.item.createTime) }}</span>
			</template>
			<template v-slot:custom-cells-cell(updateTime)="{data}">
				<span>{{ formatTime(data.item.updateTime) }}</span>
			</template>
			<template v-slot:custom-cells-cell(state)="{data}">
				<b-icon :icon="calcStateIcon(data.item)" :title="calcStateTitle(data.item)" v-b-tooltip.hover></b-icon>
			</template>
		</my-table>
	</div>
</template>

<script>
	import MyTable from '../commons/Table.vue'
	import axios from 'axios'
	import gl from '../commons/global_variable.js'
	import wg from '../commons/utils.js'

	export default {
		name: "AllArticles",
		created: function() {
			this.$store.commit('menuFoucsOpr', 'articles')
			this.getItems()
			this.loadUpdateMonths()
			this.loadAllCatalogs()
		},
		components: {
			MyTable
		},
		data: function() {
			return {
				title: "文章列表",
				fields: [{
						key: 'title',
						label: '标题'
					},
					{
						key: 'createTime',
						label: '创建时间',
						"class": ["article-create-time-col"]
					},
					{
						key: 'updateTime',
						label: '最后修改时间',
						"class": ["article-update-time-col"]
					},
					{
						key: 'state',
						label: '状态',
						"class": ["article-state-col"]
					},
					{
						key: 'catalogNames',
						label: '分类目录',
						"class": ["article-catalog-col"]
					},
					{
						key: 'tagNames',
						label: '标签',
						"class": ["article-tag-col"]
					}
				],
				items: [],
				indexable: true,
				showQueryBar: true,
				selectable: false,
				selectMode: 'single',
				showSelectBtn: false,
				oprable: true,
				oprs: {
					new: true,
					update: true,
					cupdate: false,
					view: false,
					mdel: false,
					del: false
				},
				customCells: [
					"cell(createTime)", "cell(updateTime)", "cell(state)"
				],
				actionsColClass: [
					"article-action-cols"
				],
				page: {
					pagable: true,
					perPage: 15,
					totalRows: 0,
					currentPage: 1
				},
				modal: {
					content: '',
					title: '操作确认',
					visible: false,
					okCallback: function() {},
					cancelCallback: function() {}
				},
				updateMonths: [],
				allCatalogs: [],
				query: {
					state: -1,
					title: '',
					lastUpdateMonth: '',
					catalogId: -1
				}
			}
		},
		methods: {
			resetQuery: function(){
				this.query.state = -1
				this.query.title = ''
				this.query.lastUpdateMonth = ''
				this.query.catalogId = -1
			},
			loadUpdateMonths: function(){
				wg.utils.axiosGet.call(this, 'article/qalut', function(res){
					this.updateMonths = res.data
				}, function(res){
					this.$refs.tableObj.onAnyError(res.msg, 3)
				}, function(error){
					that.$refs.tableObj.onAnyError('查询文章修改日期列表失败', 3)
				})
			},
			loadAllCatalogs: function(){
				wg.utils.axiosGet.call(this, 'catalog/list', function(res){
					this.allCatalogs = res.data
					this.allCatalogs.forEach(function(item){
						var prefix = ''
						for(var x =0 ;x<item.lv; x++){
							prefix = '---' + prefix
						}
						item.name = prefix + item.name
					})
				}, function(){
					this.$refs.tableObj.onAnyError('查询分类目录失败')
				})
			},
			modalOk: function() {
				this.modal.okCallback.call(this)
				this.modalInit()
			},
			modalCancel: function() {
				this.modal.cancelCallback.call(this)
				this.modalInit()
			},
			modalInit: function() {
				this.modal.visible = false
				this.modal.okCallback = function() {}
				this.modal.cancelCallback = function() {}
			},
			calcStateTitle: function(item) {
				if (item.state === gl.cms_args.article.published) {
					return '已发布'
				} else if (item.state === gl.cms_args.article.unpublish) {
					return '未发布'
				} else if (item.state === gl.cms_args.article.trashed) {
					return '已到回收站'
				}
			},
			calcStateIcon: function(item) {
				if (item.state === gl.cms_args.article.published) {
					return 'check2-circle'
				} else if (item.state === gl.cms_args.article.unpublish) {
					return 'x-circle'
				} else if (item.state === gl.cms_args.article.trashed) {
					return 'trash-fill'
				}
			},
			unpublish: function(selectedItem) {
				this.modal.content = '确定要下线此文章吗?'
				this.modal.visible = true
				this.modal.okCallback = function() {
					var that = this
					axios.get(gl.cms_args.server_url + 'article/unpublish?id=' + selectedItem.id).then(function(response) {
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.$refs.tableObj.onAnySuccess('下线成功')
							that.getItems()
						} else {
							that.$refs.tableObj.onAnyError(res.msg, 3)
						}
					}).catch(function(error) {
						that.$refs.tableObj.onAnyError('下线失败', 3)
					})
				}
			},
			publish: function(selectedItem) {
				this.modal.content = '确定要发布此文章吗?'
				this.modal.visible = true
				this.modal.okCallback = function() {
					var that = this
					axios.get(gl.cms_args.server_url + 'article/publish?id=' + selectedItem.id).then(function(response) {
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.$refs.tableObj.onAnySuccess('发布成功')
							that.getItems()
						} else {
							that.$refs.tableObj.onAnyError(res.msg, 3)
						}
					}).catch(function(error) {
						that.$refs.tableObj.onAnyError('发布失败', 3)
					})
				}
			},
			itemTrash: function(selectedItem){
				this.modal.content = '确认要移动此文章到回收站吗?'
				this.modal.visible = true
				this.modal.okCallback = function() {
					var that = this
					// 至回收站
					axios.get(gl.cms_args.server_url + 'article/trash?id=' + selectedItem.id).then(function(response) {
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.$refs.tableObj.onAnySuccess('已迁移至回收站')
							that.getItems()
						} else {
							that.$refs.tableObj.onAnyError(res.msg, 3)
						}
					}).catch(function(error) {
						that.$refs.tableObj.onAnyError('迁移至回收站失败', 3)
					})
				}
			},
			itemOutTrash: function(selectedItem){
				this.modal.content = '确认要从回收站还原此文章吗?'
				this.modal.visible = true
				this.modal.okCallback = function(){
					var that = this
					axios.get(gl.cms_args.server_url + 'article/untrash?id=' + selectedItem.id).then(function(response){
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.$refs.tableObj.onAnySuccess('已从回收站还原')
							that.getItems()
						} else {
							that.$refs.tableObj.onAnyError(res.msg, 3)
						}
					}).catch(function(error) {
						that.$refs.tableObj.onAnyError('从回收站还原失败', 3)
					})
				}
			},
			itemDelete: function(selectedItem) {
				this.modal.content = '确认要从回收站删除此文章吗? 此删除将无法恢复!'
				this.modal.visible = true
				this.modal.okCallback = function() {
					var that = this
					// 直接删除
					axios.get(gl.cms_args.server_url + 'article/fdel?id=' + selectedItem.id).then(function(response) {
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.$refs.tableObj.onAnySuccess('删除成功')
							that.getItems()
						} else {
							that.$refs.tableObj.onAnyError(res.msg, 3)
						}
					}).catch(function(error) {
						that.$refs.tableObj.onAnyError('文章删除失败', 3)
					})
				}
			},
			itemUpdate: function(selectedItem) {
				if (selectedItem.state === gl.cms_args.article.published) {
					this.$refs.tableObj.onAnyError('已发布的文章不能修改，先下线再修改.', 3)
				} else {
					this.$router.push({
						name: "update-articles",
						params: {
							id: selectedItem.id
						}
					})
				}
			},
			itemNew: function() {
				this.$router.push({
					path: '/new-articles'
				})
			},
			formatTime: function(dateTime) {
				return wg.utils.formatDateTime(dateTime)
			},
			getItems: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'article/list', {
					page: this.page.currentPage,
					size: this.page.perPage,
					titlePattern: this.query.title,
					state: this.query.state,
					catalogId: this.query.catalogId,
					lastUpdateMonth: this.query.lastUpdateMonth
				}).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.items = res.data.records
						that.page.totalRows = res.data.total
						that.page.perPage = res.data.size
					} else {
						that.$refs.tableObj.onQueryError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onQueryError()
				})
			}
		},
		watch: {
			items: function(values){
				values.forEach(function(it){
					// 发布状态下 修改 按钮不可用
					it.$updateDisable = it.state === gl.cms_args.article.published || it.state === gl.cms_args.article.trashed
					// 发布状态下与回收状态下 回收 按钮不可用
					it.$trashDisable = it.state === gl.cms_args.article.published || it.state === gl.cms_args.article.trashed
					// 发布与未发布状态下 还原 按钮不可用
					it.$outTrashDisable = it.state === gl.cms_args.article.published || it.state === gl.cms_args.article.unpublish
					// 发布与未发布状态下 删除 按钮不可用
					it.$delDisable = it.state === gl.cms_args.article.published || it.state === gl.cms_args.article.unpublish
					// 发布状态下 发布 按钮不可用
					it.$publishedDisable = it.state === gl.cms_args.article.published || it.state === gl.cms_args.article.trashed
					// 未发布与已回收状态下 下线 按钮不可用
					it.$unpublishDisable = it.state === gl.cms_args.article.unpublish || it.state === gl.cms_args.article.trashed
				})
			}
		}
	}
</script>

<style>
	.article-action-cols {
		width: 18.75rem!important;
	}
	.article-create-time-col, .article-update-time-col {
		width: 10.625rem;
	}
	.article-state-col {
		width: 2.8125rem;
	}
	.article-catalog-col {
		width: 18.75rem;
	}
	.article-tag-col {
		width: 15.625rem;
	}
</style>
